<template>
	<!-- 选择角色 -->
	<layout title="选择角色" background="#fff">
		<view class="screen" style="height: 100vh;" :style="'padding-top:' + vuex_phoneLayout.screenPaddingTop + 'px'">
			<view class="identity_tips" @tap="goLogin('1')">
				<image :src="getImgSrc('/login/pty2@2x.png')" style="height: 100%;width: 100%;" mode="heightFix"></image>
				<!-- <view class="">
					我是赏金猎人
				</view> -->
			</view>
			<view class="identity_tips" @tap="goLogin('2')">
				<!-- <view class="">
					我是用户
				</view> -->
				<!-- <image :src="getImgSrc('/login/yh@2x.png')" style="height: 100%;" mode="heightFix"></image> -->
				<image :src="getImgSrc('/login/yh2@2x.png')" style="height: 100%;width: 100%;" mode="heightFix"></image>
			</view>
			<view class="screen-bottomFill" style="width: 100%;" :style="'height:' + vuex_phoneLayout.ipxbottom + 'px;'">
				<!-- 用来填充导航 和 底部的多余 -->
			</view>
		</view>
	</layout>
</template>

<script>
export default {
	components:{
	},
	data() {
		return {
			navigationBarStyle: {
				background: '',
				color: 'black',
				iconText: '选择角色' //导航栏文字
			},
		}
	},
	onLoad(e) {
		uni.hideTabBar({})
		if(e.path && e.path!="/pages/start/index"){
			this.path = e.path
		}else{
			this.path = "/pages/index/index"
		}
	},
	onShow(){
	},
	methods: {
		goIndex(){
			if(this.path == "/pages/index/index" || this.path == "/pages/mtask/index" || this.path == "/pages/mine/index"){
				uni.navigateTo({
					url: this.path
				})
			}else{
				uni.navigateTo({
					url: "/pages/index/index"
				})
			}
		},
		goLogin(e){
			this.$u.vuex('vuex_identity', e)
			uni.navigateTo({
				url: '/pages/sys/login/setLoginType'
			})
		}
	}
}
</script>

<style lang="scss">
	@import "@/pages/common/themeIndex.scss";
	.identity_tips {
		position: relative;
		width: 680rpx;
		height: 260rpx;
		border-radius: 20rpx;
		margin: 50rpx auto 0;
		background: #F3F8FD;
		font-size: 40rpx;
		font-weight: 600;
		color: $base-color1;
		overflow: hidden;
	}
		
	.gradient-border:after {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 100%;
	  width: 100%;
	  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
	  border-radius: 3.5px;
	  z-index: 1;
	  animation: animatedgradient 3s ease alternate infinite;
	  background-size: 300% 300%;
	}
	@keyframes animatedgradient {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}
	@media screen and (max-height: 570px) {
	
		.start_swiper .text3{
			margin-top: 3vh;
		}
		.interBtn {
			margin-top: 6vh;
		}
	}
	@media screen and (min-height: 780px) {
		.start_swiper .text1{
			margin-top: 15vh;
		}
		.start_swiper .text2{
			margin-top: 15rpx;
		}
		.start_swiper .logo{
			width: 100rpx;
			height: 100rpx;
			margin-top: 5vh;
		}
		.start_swiper .text3{
			margin-top: 3vh;
		}
		.interBtn{
			margin:  10vh auto 0;
		}
	}
</style>
